import { ProColumns, ProTable } from '@/components/Pro';
import { DATABASE_TYPE_ENUM, fetchDictInfo } from '@/utils';
import React, { useEffect, useState } from 'react';
import { useIntl } from 'umi';

export const Overview: React.FC<TransformerDataDTO['dataList']> = ({ ProTableData }) => {
  const [onlinState, setOnlieState] = useState([]);
  const intl = useIntl();

  useEffect(() => {
    (async () => {
      try {
        // 在线状态字典
        let OnlineState = await fetchDictInfo(DATABASE_TYPE_ENUM.ONLINE_STATUS);
        setOnlieState(OnlineState || []);
      } catch (error) {
        console.error(error);
      }
    })();
  }, []);

  const columns: ProColumns<DataType>[] = [
    {
      title: intl.formatMessage({ id: 'data.s/N' }),
      dataIndex: 'pageIndex',
      valueType: 'index',
      search: false,
    },
    {
      title: intl.formatMessage({ id: 'stationRealtimeMonitoring.tName' }),
      dataIndex: 'name',
      valueType: 'text',
    },
    {
      title: intl.formatMessage({ id: 'data.onlineStatus' }),
      dataIndex: 'onlineState',
      valueType: 'select',
      fieldProps: {
        maxTagCount: 'responsive',
      },
      render: (_, record) => {
        let arr = onlinState.filter((res) => Number(res?.value) === Number(record?.onlineState));
        return arr[0]?.label || '--';
      },
    },
    {
      title: intl.formatMessage({ id: 'stationRealtimeMonitoring.voltageLevel' }),
      dataIndex: 'voltLevel',
      valueType: 'select',
      fieldProps: {
        maxTagCount: 'responsive',
      },
    },
    {
      title: intl.formatMessage({ id: 'data.apparentPowerKva' }),
      dataIndex: 'apparentPower',
      search: false,
    },
  ];

  return (
    <ProTable
      style={{ padding: 30, paddingTop: 0 }}
      columns={columns}
      dataSource={ProTableData}
      rowKey="key"
      search={false}
      pagination={{
        showQuickJumper: true,
      }}
      dateFormatter="string"
      headerTitle={intl.formatMessage({ id: 'data.transformerOverview' })}
      toolBarRender={false}
      scroll={{ x: 'max-content' }}
    />
  );
};
